<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button class="editBtn" size="mini" type="info" @click="editing=!editing">{{editing ? '完成' : '编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item v-for="(item,index) in channelList" @click="hSkipChannel(index)" :key="item.id">
          <span :style="{color:index===curIndex ? 'red': '#000'}">{{item.name}}</span>
          <van-icon name="close" class="btn"  v-if="editing && item.id!==0"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item v-for="item in recommendChannels" @click="hClickAddChannel(item)" :key="item.id">
          <span>{{item.name}}</span>
          <van-icon name="add-o" class="btn"  v-if="editing"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, putChannels } from '@/api/channels.js'
export default {
  name: 'ChannelEdit',
  props: {
    channelList: {
      type: Array,
      required: true
    },
    curIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannelsData: [],
      editing: false// 是否编辑状态
    }
  },
  mounted () {
    this.mLoadAllChannels()
  },
  methods: {
    async mLoadAllChannels () {
      const { data } = await getAllChannels()
      this.allChannelsData = data.channels
    },
    async hSkipChannel (index) {
      if (!this.editing) { // 频道跳转
        this.$emit('update-cur-index', index)
      } else { // 频道取关
        if (index === 0) return // 如果是推荐直接返回
        try {
          if (index < this.curIndex) this.$emit('update-cur-index', this.curIndex - 1, true) // true为修改模式
          this.channelList.splice(index, 1)// ----------------------------------------1.移除被取消关注的频道
          const data = this.channelList.slice(1)// -----------------------------------2.保存最新的订阅频道列表
          const channels = data.map((item, seq) => { return { id: item.id, seq } })// 3.处理参数格式
          await putChannels({ channels })// ------------------------------------------4.发送请求
        } catch (err) {
          this.$toast.fail('操作失败')
          console.log(err, '新增关注频道失败')
        }
      }
    },
    async hClickAddChannel (newChannel) { // 新增订阅频道
      if (!this.editing) return // 非编辑模式直接return
      try {
        this.channelList.push(newChannel) // ----------------------------------------1.将新增频道添加到订阅列表
        const data = this.channelList.slice(1) // -----------------------------------2.保存最新订阅列表
        const channels = data.map((item, seq) => { return { id: item.id, seq } }) // 3.处理参数格式
        await putChannels({ channels }) // ------------------------------------------4.发送请求更新最新订阅列表
      } catch (err) {
        this.$toast.fail('订阅频道失败')
        console.log(err, '新增关注频道失败')
      }
    }
  },
  computed: {
    recommendChannels () {
      return this.allChannelsData.filter(channel => this.channelList.findIndex(item => item.id === channel.id) === -1)
    }
  }
}
</script>

<style lang="less" scoped>
  .channel{
    padding:15px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
}
.editBtn {
    color: rgb(229, 97, 91) !important;
    margin-right:0px;
    padding:0 10px;
    background-color: #fff;
    border-color: rgb(229, 97, 91);
  }
</style>
